<template>
    <div class="button-wrapper">
        <button @click="addContent">7</button>
        <button @click="addContent">8</button>
        <button @click="addContent">9</button>
        <button @click="addContent" class="delete">删除</button>
        <button @click="addContent">4</button>
        <button @click="addContent">5</button>
        <button @click="addContent">6</button>
        <button @click="addContent" class="clear">清空</button>
        <button @click="addContent">1</button>
        <button @click="addContent">2</button>
        <button @click="addContent">3</button>
        <button @click="addContent" class="confirm">确定</button>
        <button @click="addContent" class="dot">.</button>
        <button @click="addContent">0</button>
        <button @click="addContent" class="plus">+</button>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component} from 'vue-property-decorator';

    @Component
    export default class NumberPad extends Vue {
        name = 'NumberPad';

        addContent(event: MouseEvent) {
            const button = (event.target as HTMLButtonElement);
            let text: string | null;
            if (button.className === 'delete') {
                text = 'delete';
            } else if (button.className === 'clear') {
                text = 'clear';
            } else if (button.className === 'confirm') {
                text = 'confirm';
            } else {
                text = button.textContent;
            }
            this.$emit('update:content', text);
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/assets/style/helper.scss";

    .button-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 10fr) 7fr;
        grid-template-rows: repeat(4, 1fr);

        > button {
            border: none;
            margin: 1px;
            padding-top: 0.5em;
            padding-bottom: 0.5em;
            font-size: 1.5em;
            background-image: linear-gradient(to bottom right, #E0E0E0, #F8F8F8);

            .icon {
                --color-1: #FD9A16;
            }
        }

        > button.clear,
        > button.plus,
        > button.dot,
        > button.delete{
            color: $color-orange;
            font-size: 1.2em;
        }

        > button.confirm {
            font-size: 1.2em;
            grid-row: span 2;
            word-break: break-all;
            color: white;
            background-image: linear-gradient(to bottom right, $color-orange, $color-yellow);
        }
    }


</style>